<template>
  <Header id="pdd_header">
    <div class="left">
      <Icon type="ios-arrow-back" size="20"/>
    </div>
    <div class="right">
        <span @click='exitUser'>
        <a href="javascript:;">登出</a>
      </span>
      <span>{{user.username}}</span>
      <span>{{user.realname}}</span>
      <span><Icon type="md-contact" size='20'/></span>
    </div>
  </Header>
</template>

<script>
import {mapState} from "vuex"
export default {
    computed:{
        ...mapState({
            user:"user"
        })
    },
    methods:{
        exitUser(){
            this.$axios({
                url:"/admin/account/logout"
            }).then((res)=>{
                console.log(res);
                this.$Message.success(res.data.message)
            })
        }
    }
};
</script>

<style>
#pdd_header {
  background: rgb(243, 238, 233);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 0 30px;
  display: flex;
}
.left,
.right {
  flex: 1;
}
.right > span {
  float: right;
  margin: 0 8px;
  font-size: 17px;
}
</style>
